const HtmlWebpackPlugin=require('html-webpack-plugin')
const path = require('path');
module.exports = {
    //mode模式中的production代表生产模式
    mode:'production',
    devServer:{
        port:3333,
    },
    //entry入口
    entry: './src/main.js',
    //output出口
    output: {
        clean:true,//每次打包之前清空dist目录下的代码
        path: path.join(__dirname, 'dist'),  //出口路径
        filename: 'bundle.js',  //出口文件名
    },
    plugins: [new HtmlWebpackPlugin({
        template:'./public/index.html'//对应的html文件作为模板生成新的html文件
    })],
    module: {
        rules: [ //loader的规则
          {
            test: /\.css$/i,  //让webpack解析(认识)以点css结尾的文件，i为ignore为忽略大小写的意思
            //css-loader的作用是让webpack能够解析css文件
            //style-loader可以把解析好的样式插入到DOM 中
            //数组中loader的使用顺序是从右到左，先cssload再styleload
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/i,
            use: ['style-loader','css-loader','less-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif|jepg)$/i,
            //asset模式会把小于8kb的图片转化为base64
            //把大于8kb的图片原图输出
            type: 'asset'
          },
          
          {
            //不需要处理字体文件，直接输出原文件即可
            //所以使用的是asset/resource模式
            //asset/resource模式会直接输出原文件
            test:/\.(eot|svg|ttf|woff|woff2)/i,
            type:'asset/resource',
            //generator生成器
            //放在font文件夹下面，中括号name是原文件名字，六位数字符串
            //，ext意思是沿用原文件的扩展名
            generator:{
                filename:'font/[name].[hash:6][ext]'
            }
          },
          {
            test: /\.js$/i,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ],
    },
};

//https://webpack.docschina.org/concepts/#entry
//在操作修改了入口文件的情况下，再来改出口文件
//新增：const path = require('path');
// output: {
//     path: path.join(__dirname, 'dist'),   
//     杠杠dirname就是当前路径即WEBPACK_CONFIG  
//     这一行用来指定输入的文件放哪里
//     filename: 'bundle.js',
// },
//此时已有mian的dist下有新多了个bundle
//若想新增bundle的时候除去main.js文件
//则再output里再加clean:true,

//但是之前执行yarn build的时候都有警告:
// The 'mode' option has not been set, webpack will fallback to 'production' for this value. 
//现在加上 mode:'production', 这一项，就可以没有警告了


//下载jquery： yarn add jquery
//会再package.json下多出一项：
// "dependencies": {
//     "jquery": "^3.6.1"
// }


//HtmlWebpackPlugin插件
//作用：以某个html文件作为模板生成新的html文件并把打包好的代码引入
//https://webpack.docschina.org/plugins/html-webpack-plugin/
//先下载yarn add html-webpack-plugin -D
//再 const HtmlWebpackPlugin=require('html-webpack-plugin')
//然后
// plugins: [new HtmlWebpackPlugin({
//     template:'./public/index.html'//对应的html文件作为模板生成新的html文件
// })],
//然后node yarn build会再dist文件下


